import Cesium from '../Ces/Cesium';

interface EarthPin {
  content: string;
}

interface Position {
  x: number;
  y: number;
}

class Overlay {
  private _visible: boolean;
  private _viewer: any; // 由于不清楚 viewer 具体类型，暂时使用 any
  private _target: HTMLElement | undefined;

  constructor(viewer: any) {
    this._visible = false;
    this._viewer = viewer;
  }

  get target(): HTMLElement | undefined {
    return this._target;
  }

  set content(value: string) {
    if (Cesium.defined(this.target)) {
      this.target.textContent = value;
    }
  }

  createGraph(container: HTMLElement | undefined, earthPin: EarthPin | undefined): HTMLElement {
    this._target = Overlay.createWrapNode();
    if (Cesium.defined(container)) {
      container.appendChild(this._target);
    }
    if (Cesium.defined(earthPin)) {
      this.content = earthPin.content;
    }
    return this._target;
  }

  static createWrapNode(): HTMLElement {
    const div = document.createElement('div');
    div.className = 'backdrop';
    div.style.display = 'none';
    div.style.position = 'absolute';
    div.style.bottom = '0';
    div.style.left = '0';
    div.style['pointer-events'] = 'none';
    div.style.padding = '4px';
    div.style.backgroundColor = 'white';
    div.style.color = 'black';
    return div;
  }

  setVisible(visible: boolean): void {
    if (!Cesium.defined(this._target)) {
      this.createGraph(null, null );
    }
    if (this._visible !== visible) {
      this._visible = visible;
      if (this._target) {
        this._target.style.display = visible ? 'block' : 'none';
      }
    }
  }

  showAt(position: Position | undefined, message: string | undefined): void {
    if (position && message) {
      this.setVisible(true);
      if (this._target) {
        this._target.innerHTML = message;
        this._target.style.left = position.x + 10 + 'px';
        this._target.style.bottom = this._viewer.canvas.clientHeight - position.y + 'px';
      }
    }
  }

  destroy(): void {
    if (Cesium.defined(this._target)) {
      this._target.remove();
    }
    return Cesium.destroyObject(this)
  }
}

export default Overlay;
